<template>
  <div>
    <van-nav-bar title="地图找房" left-arrow @click-left="$router.back()" />
    <div id="container"></div>
  </div>
</template>

<script>
import { getCityMes } from '@/api/foundhouse'
// import { getCityMes } from '@/api/foundhouse'
export default {
  name: 'map-page',
  components: {},
  props: {},
  data() {
    return {}
  },
  mounted() {
    this.setMap()
  },
  computed: {},
  watch: {},
  async created() {
    const city = JSON.parse(localStorage.getItem('city'))
      ? JSON.parse(localStorage.getItem('city')).value
      : '杭州'
    console.log(city)
  },
  methods: {
    async setMap() {
      const map = new window.BMapGL.Map('container') // 创建地图实例
      // const point = new window.BMapGL.Point(116.404, 39.915) // 创建点坐标
      const city = JSON.parse(localStorage.getItem('city'))
        ? JSON.parse(localStorage.getItem('city')).label + '市'
        : '杭州市'
      map.centerAndZoom(city, 12) // 初始化地图,设置中心点坐标和地图级别
      // map.centerAndZoom(point, 15)
      map.enableScrollWheelZoom(true)
      // const res = await getCityMes(city)
      // this.quyu = res.data.body
      const quyu = JSON.parse(localStorage.getItem('quyu'))
      quyu.forEach((item) => {
        const point = new window.BMapGL.Point(
          item.coord.longitude,
          item.coord.latitude
        )
        const content = `<p class="zxc">${item.label}  <br />  ${item.count}</p>`
        const label = new window.BMapGL.Label(content, {
          // 创建文本标注
          position: point,
          offset: new window.BMapGL.Size(10, 20)
        })
        map.addOverlay(label) // 将标注添加到地图中
        label.setStyle({
          color: '#000',
          fontSize: '12px',
          width: '70px',
          height: '70px',
          borderRadius: '50%',
          textAlign: 'center',
          // padding: '10px',
          backgroundColor: '#58b67f',
          border: '2px solid #fff' // 设置label的样式,
        })

        label.addEventListener('click', async function () {
          const point = new window.BMapGL.Point(
            item.coord.longitude,
            item.coord.latitude
          )
          map.centerAndZoom(point, 15)
          map.clearOverlays() // 移除覆盖物
          const res = await getCityMes(item.value)
          res.data.body.forEach((item) => {
            const point = new window.BMapGL.Point(
              item.coord.longitude,
              item.coord.latitude
            )
            const content = `<p class="zxc">${item.label}  <br />  ${item.count}</p>`
            const label = new window.BMapGL.Label(content, {
              // 创建文本标注
              position: point,
              offset: new window.BMapGL.Size(10, 20)
            })
            map.addOverlay(label) // 将标注添加到地图中
            label.setStyle({
              color: '#000',
              fontSize: '12px',
              width: '70px',
              height: '70px',
              borderRadius: '50%',
              textAlign: 'center',
              // padding: '10px',
              backgroundColor: '#58b67f',
              border: '2px solid #fff' // 设置label的样式,
            })
          })
          label.addEventListener('click', async function () {
            alert('这是个弹窗')
          })
        })
      })
    }
  }
}
</script>

<style scoped>
#container {
  height: 100vh;
}
::v-deep .zxc {
  margin-top: 20px !important;
  color: #fff;
}
/* .zxc{
   color: '#000',
          fontSize: '14px',
          width: '50px',
          height: '50px',
          lineHeight: '50px',
          borderRadius: '50%',
          textAlign: 'center',
          border: '2px solid #1E90FF'
} */
</style>
